<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <h1 align = "center">我的第一个标题</h1>
    <p >我的第一个段落</p>
    <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2943362579,2771183293&fm=26&gp=0.jpg" height="100" width="100"/>
    <br>
    <strong>
    <a href="http://www.w3school.com.cn" style="font-family: 'Courier New', Courier, monospace;color:blue; text-align: center;" >链接</a>
    </strong>
    <p>以下内容引用自 WWF 的网站：</p>
    <blockquote cite="http://www.worldwildlife.org/who/index.html">
    五十年来，WWF 一直致力于保护自然界的未来。
    世界领先的环保组织，WWF 工作于 100 个国家，
    并得到美国一百二十万会员及全球近五百万会员的支持。
    </blockquote>
    <p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>
    <p>To open a file, select:</p>

    <p><kbd>File | Open...</kbd></p>
    <samp>
        demo.example.com login: Apr 12 09:10:17
        Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
    </samp>
    <code>
            var person = {
                 firstName:"Bill",
                  lastName:"Gates",
                   age:50, 
                   eyeColor:"blue"
                 }
    </code>
    <p>Coding Example:</p>

<pre>
    <pre>
        var person = { firstName:"Bill",
            lastName:"Gates",
            age:50,
            eyeColor:"blue"
        }
        </pre>
</pre>
<p>Einstein wrote:</p>

<p><var>E = m c<sup>2</sup></var></p>
<!-- 在此处写注释 -->
<!-- 这是一段注释 -->

<p>这是一个段落。</p>

<!-- 记得在此处添加信息 -->
<!-- 此刻不显示图片：
<img border="0" src="/i/tulip_ballade.jpg" alt="Tulip">
-->
<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->
<p style="color: red; margin-left: 20px">
    This is a paragraph
</p>
<a href="http://www.w3school.com.cn/">Visit W3School</a>
<br>
<a href="http://www.w3school.com.cn/"  target="_blank">
    <img  src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2943362579,2771183293&fm=26&gp=0.jpg" height="100" width="100">
</a>
<a name="tips">基本的注意事项 - 有用的提示</a>
<a href="#tips">有用的提示</a>
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
<table >
    <tr>
    <td>row 1, cell 1</td>
    <td>row 1, cell 2</td>
    </tr>
    <tr>
    <td>row 2, cell 1</td>
    <td>row 2, cell 2</td>
    </tr>
    </table>
    <table border="1">
        <tr>
        <th>Heading</th>
        <td>&nbsp;</td>
        </tr>
        <tr>
        <th>row 1, cell 1</th>
        <td>row 1, cell 2</td>
        </tr>
        <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
        </tr>
        </table>
        <ul>
            <li>Coffee</li>
            <li>Milk</li>
            </ul>
            <ol>
                <li>Coffee</li>
                <li>Milk</li>
                </ol>

                <dl>
                    <dt>Coffee</dt>
                    <dd>Black hot drink</dd>
                    <dt>Milk</dt>
                    <dd>White cold drink</dd>
                    </dl>


<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
span.red {color:red;}
</style>
</head>

<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital city of England. 
It is the most populous city in the United Kingdom, 
with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
<h1>My <span class="red">Important</span> Heading</h1>
</body>
</html>